<style>
    /*table start*/
    table.default-table{
        /* -moz-border-radius: 5px;
        -webkit-border-radius:5px;
        border-radius:5px; */
        width: 100%;
        border:solid #ccc;
        border-width:1px 0px 0px 1px;
        border-collapse: collapse;
        border-spacing: 0;
    }
    table.default-table tbody tr{
        height: 30px;
        line-height: 30px;
    }
    table.default-table tbody tr.odd{
        background-color: #fff;
    }
    table.default-table tbody tr.even{
        background-color: #F5F5F5;
    }
    table.default-table tbody tr:hover{
        background-color: #eee;
    }
    table.default-table tbody tr th,table.default-table tbody tr td{
        padding:3px 5px;
        text-align: left;
        /* border: 1px solid #ddd; */
        border:solid #ccc;
        border-width:0px 1px 1px 0px;
        color:#666;font-weight: normal;font-size:12px;
    }
    table.default-table tbody tr th{
        font-weight: bold;
        text-align: center;
    }

    table.default-table tbody tr td.tac{
        text-align: center;
    }
    table.default-table tbody tr td a:hover{
        color:#0080c0;
    }
    table.default-table select{padding:3px 5px;width:170px;}
    .layui-upload-file{display: none;}
    /*table end*/
</style>
<form name="edit" action="" method="post">
<table class="default-table" style="margin:40px auto;width:96%;">

    <tr>
        <th width="16%">培训名称：</th>
        <td>
            <select name="class_id" class="layui-select" lay-filter="demo">
                <option>--请选择培训名称--</option>
                {foreach $classes as $key=>$vo}
                {if $vo.id eq $info.class_id}
                <option selected value="{$vo.id}">{$vo.name}</option>
                {else}
                <option value="{$vo.id}">{$vo.name}</option>
                {/if}
                {/foreach}
            </select>
        </td>
        <th width="16%">岗位及工种：</th>
        <td>
            <select name="position_id" class="layui-select">
                <option>--请选择岗位及工种--</option>
                {foreach $position as $key=>$vo}
                <optgroup label="{$vo.name}">{$vo.name}</optgroup>
                {foreach $vo.sub as $key2=>$vo2}
                {if $vo2.id eq $info.position_id}
                <option selected value="{$vo2.id}">{$vo2.name}</option>
                {else}
                <option value="{$vo2.id}">{$vo2.name}</option>
                {/if}
                {/foreach}
                {/foreach}
            </select>
        </td>
    </tr>
    <tr>
        <th>报名号：</th><td>{$info.no}</td>
        <th>报名时间：</th><td>{$info.occur_time}</td>
    </tr>
    <tr>
        <th>姓名：</th><td><input type="text" name="name" value="{$info.name}" /></td>
        <th>性别：</th>
        <td>
            {if $info.gender eq '男'}
            <input type="radio" name="gender" lay-filter="GenderRadio" value="男" title="男" checked />男
            <input type="radio" name="gender" lay-filter="GenderRadio" value="女" title="女" />女
            {else}
            <input type="radio" name="gender" lay-filter="GenderRadio" value="男" title="男" />男
            <input type="radio" name="gender" lay-filter="GenderRadio" value="女" title="女" checked />女
            {/if}
        </td>
    </tr>

    <tr>
        <th>身份证：</th><td><input type="text" name="idno" value="{$info.idno}" /></td>
        <th>电话：</th><td><input type="text" name="phone" value="{$info.phone}" /></td>
    </tr>

    <tr>
        <th>工作单位：</th>
        <td><input type="text" name="company" value="{$info.company}" /></td>
        <th>所在市州：</th>
        <td>
            <select name="city" class="layui-select">
                <option>--请选择市州--</option>
                {foreach $CITY_OPTION as $key=>$vo}
                    {if $vo eq $info.city}
                    <option selected value="{$vo}">{$vo}</option>
                    {else}
                    <option value="{$vo}">{$vo}</option>
                    {/if}
                {/foreach}
            </select>
        </td>
    </tr>

    <tr>

        <th>头像：</th>
        <td colspan="3">
            <div style="float:left;">
                <img id="demo1" style="width:80px;height:80px;" src="{$info.avatar}" />
            </div>
            <div style="float:left;width:150px;text-align: center;padding-top:10px;">
                <input value="{$info.avatar}" type="hidden" name="avatar">
                <a id="test1" type="button"
                   style="border:1px solid #ccc;border-radius: 4px;padding:5px 10px;cursor:pointer;">上传头像</a>
                <p class="text-center" style="padding:0;margin:0;">建议尺寸128 * 128像素</p>
            </div>
        </td>
    </tr>
</table>
<div style="margin:-20px auto 0;text-align: center">
    <input type="hidden" name="id" value="{$info.id}" />
    <button type="button" onclick="doPost();" style="padding:3px 10px;">保存信息</button>
</div>
</form>

<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script>
    var $ = layui.$;
    let classesJson = JSON.parse('{$classesJson|raw}');

    function doPost(){
        let data = $("form[name=edit]").serialize();
        $.post("/edu/classedit.html", data, function(res) {
            if(res.code==0){
                layer.msg(res.info);
            }else{
                layer.msg(res.info);
                setTimeout(function () {
                    parent.location.reload();
                }, 2000);
            }
        },"json");
    }


    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1024
            , done(res){
                $("input[name=avatar]").val(res.url);
                $('#demo1').attr('src', res.url); //图片链接（base64）
                layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });
    });

    function getClassPositions(class_id){
        for(let i=0; i<classesJson.length; i++) {
            if(classesJson[i].id == class_id)
                return classesJson[i]['sub'];
        }
    }

    $("select[name=class_id]").change(function () {
        let class_id = $(this).val();
        let positions = getClassPositions(class_id);
        let html = '<option>--请选择工种--</option>';
        for(let i=0; i<positions.length; i++){
            html += '<optgroup label="'+positions[i].name+'">'+positions[i].name+'</optgroup>';

            for(let j=0; j<positions[i]['sub'].length; j++) {
                html += '<option value="' + positions[i]['sub'][j]['id'] + '">' + positions[i]['sub'][j]['name'] + '</option>'
            }
        }
        $("select[name=position_id]").html(html);
    });

</script>